<template>
  <div class="body">
  <div class="radio_wrap">
    <RadioCategory></RadioCategory>
    <div class="rdi_top">
      <div class="list list_left">
        <div class="title">
          <h3>精彩节目推荐</h3>
          <a href="#" class="more">更多></a>
        </div>
        <ul>
          <li v-for="show,index in recShowList" :key="show.id" >
            <a href="#" class="a_img"
              ><img
                :src="show.coverUrl"
            /></a>
            <a href="" class="a_des"><span>{{cutWord(index,"show")}}</span></a>
            <a href="" class="a_edit"><span>{{show.dj.brand}}</span></a>
            <a href="" class="a_type"><div>{{show.channels[0]}}</div></a>
          </li>
        </ul>
      </div>
      <div class="list list_right">
        <div class="title">
          <h3>节目排行榜</h3>
          <a href="#" class="more">更多></a>
        </div>
        <ul>
          <li v-for="top,index in topList" :key="top.rank">
            <a href="" class="a_img"
              ><img
                :src="top.program.coverUrl"
            /></a>
            <a href=""><span>{{cutWord(index,"top")}}</span></a>
            <a href="" class="a_edit"><span>{{ top.program.name }}</span></a>
            <a href="" class="a_type" :class="{a_top3:index<3}" style="border:none"><div>TOP{{top.rank}}</div></a>
          </li>
        </ul>
      </div>
    </div>
    <div class="rdi_type tp1" v-for="rec in radioCategoryRec" :key="rec.categoryId">
      <div class="rdi_type_title" >
        <h3>{{rec.categoryName}}·电台</h3>
        <span>更多></span>
      </div>
      <ul>
        <li class="type_item" v-for="radio in rec.radios" :key="radio.id">
          <a href="#">
            <img :src="radio.picUrl"/>
          </a>
          <div class="item_con">
            <a href="#"><span>{{radio.name}}</span></a>
            <p>{{radio.lastProgramName}}</p>
          </div>
        </li>
      </ul>
    </div>
   
  </div>
  </div>
</template>

<script>
import {reqRadioCategoryRec,reqRadioTopList,reqRadioRecShow} from "../../api/index"
import RadioCategory from "./components/RadioCategory.vue"

export default {
  name: "RadioShow",
  data() {
    return {
      radioCategoryRec:[],
      recShowList:[],
      topList:[]
    };
  },
  components:{RadioCategory},
  async mounted(){
    const result=await reqRadioCategoryRec()
    this.radioCategoryRec=result.data

    const result1=await reqRadioRecShow()
    this.recShowList=result1.programs

    const result2=await reqRadioTopList()
    this.topList=result2.toplist.slice(0,10)
  },
  methods: {
    cutWord(index,kind){
      if(kind==="top")var word=this.topList[index].program.description
      else var word=this.recShowList[index].description
      if (word.length<23)return word
      word=word.slice(0,23)
      return word+"..."
    }
  },
};
</script>

<style lang="less" scoped>
.body{
  background-color:#f5f5f5 ;
.radio_wrap {
  border-left: 1px solid rgb(211, 211, 211);
  border-right: 1px solid rgb(211, 211, 211);
  margin: 0 auto;
  width: 900px;
  padding: 40px;
  background-color: #fff;
  position: relative;
  .rdi_top {
    overflow: hidden;
    margin-top: 10px;
    width: 900px;
    // border: 1px solid black;
    .list {
      width: 426px;
      // border:1px solid red;
      .title {
        height: 42px;
        h3 {
          float: left;
          font-size: 24px;
          font-weight: 500;
        }
        .more {
          float: right;
          margin-top: 14px;
        }
      }
      ul {
        border: 1px solid rgb(226, 226, 226);
        border-top: 2px solid rgb(194, 12, 12);
        li {
          position: relative;
          height: 40px;
          padding: 10px 0;

          .a_img {
            float: left;
            margin: 0 15px 0;
            img{
              width:40px;
              height:40px;
            }
          }
          .a_des{
            span{
              display: inline-block;
              height: 15px;
            }
          }
          .a_type {
            position: absolute;
            padding: 0 5px;
            left: 360px;
            top: 30%;
            border: 1px solid rgb(153, 153, 153);
            color: rgb(153, 153, 153);
          }
          .a_edit {
            position: absolute;
            left: 70px;
            top: 30px;
            color: rgb(153, 153, 153);
          }
          .a_top3{
            color:rgb(183, 34, 40);
            font-weight:800;
          }
          .a_top3::after{
            content:"⭐ ";
            display: inline-block;
          }
        }
        li:nth-of-type(even) {
          background-color: rgb(247, 247, 247);
        }
      }
    }
    .list_left {
      float: left;
    }
    .list_right {
      float: right;
    }
  }
  .rdi_type {
    // border: 1px solid red;
    overflow: hidden;
    margin-top:35px;
    .rdi_type_title {
      border-bottom:2px solid rgb(186, 35, 0);
      overflow: hidden;
      h3 {
        float: left;
        font-size: 24px;
        font-weight: 500;
        width: 800px;
       margin-bottom: 5px;

      }
      span {
        float: right;
      }
    }
    ul {
      margin-left: -30px;
      .type_item {
        float: left;
        // border: 1px solid blue;
        width: 435px;
        height: 120px;
        padding: 20px 0;
        margin-left: 30px;
        border-bottom: 1px solid rgb(231, 231, 231);
        img {
          float: left;
          width: 120px;
          height: 120px;
        }
        .item_con {
          margin-left: 140px;
          a{
            display: block;
            margin: 16px 0 20px;
            span {
              font-size: 18px;
              font-weight: 800;
              color: black;
            }
          }
          p{
            color: rgb(153, 153, 153);
          }
        }
      }
    }
  }
}
}
</style>
